import { defineStore } from 'pinia';

const useLoginStore = defineStore('login', {
	state: () => ({
		// 注册组件
		isRegistry: false,
		// 验证码组件
		isValidateCode: false,
		// 修改状态
		changeStatus: false,
		// 登录状态
		loginStatus: false,

		// 注册表单
		form: {
			phone: '13333333333',
			password: '123456',
			confirmPassword: '123456',
		},
	}),

	getters: {
		/* useLoginStore 中的 formatPhone() getter 是一个格式化表单状态中存储的电话号码的函数。它从表单状态中提取电话号码，然后将其分为三部分：前 3 个字符、接下来的 4
		个字符和其余字符。最后，它返回格式化的电话号码，这些部分之间有空格。 */
		formatPhone(): string {
			const { phone } = this.form;
			return `${phone.substr(0, 3)} ${phone.substr(3, 4)} ${phone.substr(7, 11)}`;
		},
	},

	actions: {
		/* “useLoginStore”存储中的“changeDisplay”操作是一个带有两个参数的函数：字符串类型的“target”和布尔类型的“value”。 */
		changeDisplay(target: string, value: boolean) {
			(<any>this.$state)[target] = value;
		},

		/* 展示注册页 */
		toRegistry() {
			this.isRegistry = true;
			this.changeStatus = false;
			this.loginStatus = false;
			this.isValidateCode = false;
		},

		/** 展示登录页 */
		toLogin() {
			this.isRegistry = true;
			this.changeStatus = false;
			this.loginStatus = true;
			this.isValidateCode = false;
		},

		/* 展示修改密码 */
		toPassword() {
			this.isRegistry = true;
			this.changeStatus = true;
			this.loginStatus = false;
			this.isValidateCode = false;
		}
	},
});

export default useLoginStore;
